<template>
    <div>
        <div class="box_bg">
            <h2 class="box_tit">
                <i class="icon icon1"></i>专业设置
                <i class="reti"></i>
            </h2>
            <div class="source">
                <!-- 内容区域 fixed-->
                <div :gutter="25">
                    <div class="sourceLeft">
                        <!-- 树形结构 -->
                        <el-input placeholder="输入关键字进行过滤" v-model="filterText">
                        </el-input>
                        <el-tree class="filter-tree"
                            node-key="id"
                            :default-checked-keys="[0]"
                            :props="schoolTree.props"
                            :empty-text="schoolTree.emptyText"
                            :filter-node-method="filterNode"
                            :load="loadNode"
                            ref="schoolTree"
                            lazy
                            :highlight-current="true"
                            @node-click="handleTreeNodeClick">
                        </el-tree>
                    </div>
                    <div class="sourceRight">
                        <div class="text">
                            <!-- 选项卡  -->
                            <el-tabs v-model="tab.selectTabName" type="border-card">
                                <el-tab-pane label="班级管理" name="class" v-if="hasPermission('class:view')">
                                    <div class="components_searchs" @keyup.enter="queryClass">
                                        <span class="tit">班级名称：</span>
                                        <el-input clearable placeholder="请输入班级名称" v-model="classTable.queryParams.shortName"></el-input>

                                        <span class="tit">辅导员：</span>
                                        <el-input clearable placeholder="请输入辅导员" v-model="classTable.queryParams.userIdShow"></el-input>

                                        <span class="tit">开班状态：</span>
                                        <el-select clearable filterable v-model="classTable.queryParams.state" placeholder="请选择开班状态">
                                            <el-option
                                                v-for="item in classStateList" :key="item.id"
                                                :label="item.text"
                                                :value="item.id">
                                            </el-option>
                                        </el-select>
                                        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryClass" style="margin-left:7px;">查询</el-button>
                                        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="classResetQuery">重置</el-button>
                                    </div>
                                    <div class="components_btns">
                                        <el-button type="primary" v-has="'class:add'" icon="el-icon-plus" size="mini" @click="showAddClassDialog">添加班级</el-button>
                                        <!--
                                        <el-button type="primary" size="mini">
                                            <i class="el-icon-upload el-icon--right"></i>
                                            导出
                                        </el-button>
                                        -->
                                    </div>
                                     <div class="scrollBarX">
                                        <vue-table
                                            :api-url="classTable.apiUrl"
                                            :fields="classTable.fields"
                                            :appendParams="classTable.queryParams"
                                            :content="self"
                                            ref="classTable"
										>
                                        </vue-table>
                                    </div>
                                </el-tab-pane>
                                <el-tab-pane label="校历设置" name="schoolCale" v-if="hasPermission('schoolcalendar:view')">
                                    <div class="components_searchs" @keyup.enter="querySchoolCalendar">
                                        <span class="tit">学期：</span>
                                        <el-select clearable filterable v-model="schoolCalendarTable.queryParams.semester" placeholder="请选择学期">
                                            <el-option
                                                v-for="item in semesterList" :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                            </el-option>
                                        </el-select>

                                        <span class="tit">年级：</span>
                                        <el-select clearable filterable v-model="schoolCalendarTable.queryParams.grade" placeholder="请选择年级">
                                            <el-option
                                                v-for="item in gradeList" :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                            </el-option>
                                        </el-select>
                                        <el-button type="primary" icon="el-icon-search" size="mini" @click="querySchoolCalendar" style="margin-left:7px;">查询</el-button>
                                        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="schoolCalendarResetQuery">重置</el-button>
                                    </div>
                                    <div class="components_btns">
                                        <el-button type="primary" icon="el-icon-plus" size="mini" @click="showAddCalendarDialog" v-has="'schoolcalendar:add'">添加校历</el-button>
                                    </div>
                                    <div class="scrollBarX">
                                        <vue-table
                                            :api-url="schoolCalendarTable.apiUrl"
                                            :fields="schoolCalendarTable.fields"
                                            :appendParams="schoolCalendarTable.queryParams"
                                            :content="self"
                                            ref="schoolCalendarTable">
                                        </vue-table>
                                    </div>
                                </el-tab-pane>
                                <el-tab-pane label="培养方案" name="trainSche" v-if="hasPermission('trainScheme:view')">
                                    <div class="components_searchs" @keyup.enter="queryTrainScheme">
                                        <span class="tit">年级：</span>
                                        <!--
                                        <el-select v-model="trainSchemeTable.queryParams.semester" placeholder="请选择学期">
                                            <el-option
                                                v-for="item in semesterList" :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                            </el-option>
                                        </el-select>
                                        -->
                                        <el-input clearable placeholder="请输入年级" v-model.trim="trainSchemeTable.queryParams.grade"></el-input>
                                        <span class="tit" style="width:100px">课程编号/名称：</span>
                                        <el-input clearable placeholder="请输入课程编号/名称" v-model="trainSchemeTable.queryParams.course"></el-input>
                                        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryTrainScheme" style="margin-left:7px;">查询</el-button>
                                        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="trainSchemeResetQuery">重置</el-button>
                                    </div>
                                    <div class="components_btns  clearfix">
                                        <div class="fl">
                                            <el-button type="primary" v-has="'trainScheme:add'" icon="el-icon-plus" size="mini" @click="showAddTrainDialog">添加方案</el-button>
                                            <el-button type="primary" v-has="'trainScheme:import'" size="mini" @click="showImportTrainDialog">
                                                <i data-v-5d8a5d9d="" class="iconfont icon-leading-in"></i>
                                                导入
                                            </el-button>

                                        </div>
                                        <div class="fr">
                                            <a href="javascript: void(0);" class="link_txt" @click="downloadExcel" v-has="'trainScheme:import'">下载导入模板</a>
                                        </div>
                                    </div>
                                    <vue-table
                                        :api-url="trainSchemeTable.apiUrl"
                                        :fields="trainSchemeTable.fields"
                                        :appendParams="trainSchemeTable.queryParams"
                                        :content="self"
                                        ref="trainSchemeTable">
                                    </vue-table>
                                </el-tab-pane>
                            </el-tabs>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <class-add ref="classAdd"></class-add>
        <class-edit ref="classEdit"></class-edit>
        <school-calendar-add ref="schoolCalendarAdd"></school-calendar-add>
        <school-calendar-edit ref="schoolCalendarEdit"></school-calendar-edit>
        <school-calendar-detail ref="schoolCalendarDetail"></school-calendar-detail>
        <train-scheme-add ref="trainSchemeAdd"></train-scheme-add>
        <train-scheme-edit ref="trainSchemeEdit"></train-scheme-edit>
        <train-scheme-import ref="trainSchemeImport"></train-scheme-import>
    </div>
</template>

<script>
    import {enums} from '@/constant'
    import {config} from '@/config'
    import class_add from './class_add'
    import class_edit from './class_edit'
    import school_calendar_add from './school_calendar_add'
    import school_calendar_edit from './school_calendar_edit'
    import school_calendar_detail from './school_calendar_detail'
    import train_scheme_add from './train_scheme_add'
    import train_scheme_edit from './train_scheme_edit'
    import train_scheme_import from './train_scheme_import'
    export default {
        components: {
            "class-add":class_add,
            "class-edit":class_edit,
            "school-calendar-add":school_calendar_add,
            "school-calendar-edit":school_calendar_edit,
            "school-calendar-detail":school_calendar_detail,
            "train-scheme-add":train_scheme_add,
            "train-scheme-edit":train_scheme_edit,
            "train-scheme-import":train_scheme_import,
        },
        data() {
            return {
                self: this,
                // 树检索input值
                filterText: null,
                //院校树
                schoolTree: {
                    props: {
                        label: 'text',
                        children: 'children',
                        isLeaf: 'leaf'
                    },
                    /* dataList: [
                    ], */
                    emptyText: "暂无数据"
                },
                // tab分页组件
                tab: {
                    selectTabName: 'class', //默认选中选项卡
                },
                // 班级表格
                classTable: {
                    apiUrl: api.schoolClass.query,
                    queryParams: {
                        schoolId: null,
                        secondSchoolId: null,
                        professionId: null,
                        shortName:null,     // 年级
                        userIdShow:null,   //辅导员
                        state:null,   //开班状态
                    },
                    fields: [
                       /*  {
                            prop: "classNo",
                            label: "班级编号",
                        }, */
                        {
                            prop: "shortName",
                            label: "班级名称",
                        },
                        {
                            prop: "schoolName",
                            label: "学校",
                        },
                        {
                            prop: "secondSchoolName",
                            label: "学院",
                        },
                        {
                            prop: "professionName",
                            label: "专业",
                        },
                        /* {
                            prop: "grade",
                            label: "年级",
                        }, */
                        {
                            prop: "stateShow",
                            label: "班级状态",
                        },
                        {
                            prop: "userIdShow",
                            label: "辅导员",
                        },
                        {
                            prop: "initStudentNum",
                            label: "开班人数",
                        },
                       /*  {
                            prop: "remark",
                            label: "备注",
                        }, */
                        {
                            prop: "__action",
                            label: "操作",
                            actions: [{
                                    label: "编辑",
                                    type: "edit",
                                    auth:'class:update',
                                    func: function(vm, row) {
                                       vm.$refs.classEdit.showDialog(row.id);
                                    }
                                },
                                {
                                    label: "删除",
                                    type: "delete",
                                    auth:'class:delete',
                                    func: function(vm, row) {
                                        vm.deleteClassById(row);
                                    }
                                },
                            ],

                        },
                    ],
                },
                // 校历表格
                schoolCalendarTable: {
                    apiUrl: api.schoolCalendar.query,
                    queryParams: {
                        schoolId: null,
                        secondSchoolId: null,
                        professionId: null,
                        semester:null,   //学期
                        grade: null,  //年级
                    },
                    fields: [
                        {
                            prop: "schoolName",
                            label: "学校",
                        },
                        {
                            prop: "secondSchoolName",
                            label: "学院",
                        },
                        {
                            prop: "professionName",
                            label: "专业",
                        },
                        {
                            prop: "grade",
                            label: "年级",
                            formatter : function(row, column, cellValue){
                                let str = "";
                                if(cellValue != null && cellValue !== ""){
                                    str = cellValue + "级"
                                }
                                return str;
                            }
                        },
                        {
                            prop: "semester",
                            label: "学期",
                        },
                        {
                            prop: "startDate",
                            label: "开始时间",
                        },
                        {
                            prop: "endDate",
                            label: "结束时间",
                        },
                        {
                            prop: "state",
                            label: "状态",
                            formatter : function(row, column, cellValue){
                                let str = "";
                                if(row.state == 0){
                                    str = "进行中";
                                }else if(row.state == 1){
                                    str = "已结束";
                                }else if(row.state == 2){
                                    str = "未开始";
                                }
                                return str;
                            }
                        },
                        {
                            prop: "__component",
                            label: "操作",
                            componentName: "schoolCalendarActions",
                        },
                    ],
                },
                // 培养方案表格
                trainSchemeTable: {
                    apiUrl: api.trainScheme.query,
                    queryParams: {
                        schoolId: null,
                        secondSchoolId: null,
                        professionId: null,
                        grade:null,
                        course:null,
                    },
                    fields: [{
                            prop: "schoolName",
                            label: "学校",
                        },
                        {
                            prop: "secondSchoolName",
                            label: "学院",
                        },
                        {
                            prop: "professionName",
                            label: "专业",
                        },
                        {
                            prop: "grade",
                            label: "年级",
                            formatter : function(row, column, cellValue){
                                let str = "";
                                if(cellValue != null && cellValue !== ""){
                                    str = cellValue + "级"
                                }
                                return str;
                            }
                        },
                        {
                            prop: "semesterNum",
                            label: "学期数",
                        },
                        {
                            prop: "courseNo",
                            label: "课程编号",
                        },
                        {
                            prop: "courseName",
                            label: "课程名称",
                        },
                        {
                            prop: "theorizingPeriod",
                            label: "理论学时",
                        },
                        {
                            prop: "practicePeriod",
                            label: "实践学时",
                        },
                        {
                            prop: "lectureNum",
                            label: "学分",
                        },
                        {
                            prop: "assessmentTypeLabel",
                            label: "考核方式",
                        },
                        {
                            prop: "selectiveTypeText",
                            label: "课程类型",
                        },
                        {
                            prop: "__action",
                            label: "操作",
                            actions: [
                                /* {
                                    label: "编辑",
                                    type: "edit",
                                    auth:'trainScheme:delete',
                                    func: function(vm, row) {
                                       vm.$refs.trainSchemeEdit.showDialog(row.id);
                                    }
                                }, */
                                {
                                    label: "删除",
                                    type: "delete",
                                    auth:'trainScheme:delete',
                                    func: function(vm, row) {
                                        vm.deleteTrainSchemeById(row);
                                    }
                                }
                            ]
                        },
                    ],
                },
                // 班级列表 ( 查询使用 来自数据字典)
                semesterList:null,
                // 年级列表 ( 查询使用 来自数据字典)
                gradeList: null,
                // 班级状态列表
                classStateList: enums.CLASS_STATE,
                // 树当前选中的院校对象
                checkSchools:{
                    schoolId: null,
                    secondSchoolId: null,
                    professionId: null,
                }
            };
        },
        created() {
            // 院校树初始化 获取全部院校列表数据
            this.getSchoolList();
            // 获取学期数据
            this.getSemesterListByDicts();
            // 获取年级数据
            this.getGradeListByDicts();
        },
        mounted() {
            /* this.$on("deleteClassById",(row)=>{
                this.deleteClassById(row);
            }); */
        },
        watch: {
            filterText(val) {
                this.$refs.schoolTree.filter(val);
            }
        },
        methods: {
            // 查询节点
            filterNode(value, data, node) {
                if (!value) return true;
                return data.text.indexOf(value) !== -1;
            },
            // 院校树懒加载子节点数据
            loadNode(node, resolve) {
                let vm = this;
                if (node.level === 0) {
                    return resolve([{ id:0, text: '全部数据' }]);
                } else if (node.level === 1) { // 一级节点 : 全部数据
                    // 获取学校列表

                    /* vm.axios.get(api.getSchoolList).then(function(response) {
                        if (response.data.success) {
                            resolve(response.data.data);
                        } else {
                            vm.$message.error(response.data.msg);
                        }
                    }) */
                     resolve(this.$store.getters.getSchoolList)
                } else if (node.level === 2) { // 二级节点 : 学校数据
                     // 获取二级院校数据
                    this.axios.get(api.getSecondSchoolList, {
                        params: {
                            schoolId: node.data.id
                        }
                    }).then((response) => {
                        if (response.data.success) {
                            // 填充二级院校数据集合
                            // vm.secondSchoolList = JSON.parse(JSON.stringify(response.data.data));
                            resolve(response.data.data);
                        } else {
                            resolve([]);
                        }
                    })

                } else if(node.level === 3){
                    // 获取专业数据
                    this.axios.get(api.getProfeesionList, {
                        params: {
                            schoolId: node.parent.data.id,
                            secondSchoolId: node.data.id
                        }
                    }).then((response) => {
                        if (response.data.success) {
                            // 填充专业数据集合
                            // vm.professionList = JSON.parse(JSON.stringify(response.data.data));
                            response.data.data.forEach(function(item,index){
                                item["leaf"] = true
                            })
                           // console.log(response.data.data)
                            resolve(response.data.data);
                        } else {
                            resolve([]);
                        }
                    })
                }else{
                    resolve(null);
                }
            },
            // 获取院校数据
            getSchoolList() {
                /* let vm = this;
                vm.axios.get(api.getSchoolList).then(function(response) {
                    if (response.data.success) {
                        // 遍历返回集合 填充树一级菜单数据
                        for (let data of response.data.data) {
                            vm.schoolTree.dataList.push(data);
                        }
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                }) */
                this.$store.dispatch("getSchoolList");
            },
            // 查询学期列表(来自字典)
            getSemesterListByDicts(){
                let vm = this;
                vm.axios.get(api.dictsTypesSubListUrl, {
                     params: {
                        type: "semester_type",
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.semesterList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
             // 查询学期列表(来自字典)
            getGradeListByDicts(){
                let vm = this;
                vm.axios.get(api.dictsTypesSubListUrl, {
                     params: {
                        type: "grade",
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.gradeList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            // 班级查询按钮
            queryClass() {
                this.$refs.classTable.$emit('vuetable:refresh')
            },
            // 班级查询按钮
            querySchoolCalendar() {
                this.$refs.schoolCalendarTable.$emit('vuetable:refresh')
            },
            // 班级查询按钮
            queryTrainScheme() {
                this.$refs.trainSchemeTable.$emit('vuetable:refresh')
            },
            deleteClassById(row) {
                let vm = this;
                vm.$confirm('是否删除该条记录！', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    vm.axios.delete(api.schoolClass.deleteById + row.id)
                    .then((response) => {
                        if (response.data.success) {
                            vm.$message({
                                message: response.data.msg,
                                type: 'success',
                            });
                            vm.$refs.classTable.$emit('vuetable:current-refresh')
                        } else {
                            vm.$message.error(response.data.msg);
                        }
                    })
                },()=>{})

            },
            deleteSchoolCalendarById(row) {
                let vm = this;
                vm.$confirm('是否删除该条记录！', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    vm.axios.delete(api.schoolCalendar.deleteById + row.id)
                    .then((response) => {
                        if (response.data.success) {
                            vm.$message({
                                message: response.data.msg,
                                type: 'success',
                            });
                            vm.$refs.schoolCalendarTable.$emit('vuetable:current-refresh')
                        } else {
                            vm.$message.error(response.data.msg);
                        }
                    })
                },()=>{})

            },
            // 根据id删除培养计划
            deleteTrainSchemeById(row) {
                let vm = this;
                vm.$confirm('是否删除该条记录！', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    vm.axios.delete(api.trainScheme.deleteById + row.id)
                    .then((response) => {
                        if (response.data.success) {
                            vm.$message({
                                message: response.data.msg,
                                type: 'success',
                            });
                            vm.$refs.trainSchemeTable.$emit('vuetable:current-refresh')
                        } else {
                            vm.$message.error(response.data.msg);
                        }
                    })
                },()=>{})
            },
            clearQueryParam(){
                for(let key in this.classTable.queryParams){
                    this.classTable.queryParams[key] = null;
                }
                for(let key in this.schoolCalendarTable.queryParams){
                    this.schoolCalendarTable.queryParams[key] = null;
                }
                for(let key in this.trainSchemeTable.queryParams){
                    this.trainSchemeTable.queryParams[key] = null;
                }
            },
            // 点击树节点触发事件
            handleTreeNodeClick(data,node,treeObj){

                // 全部数据
                if(node.level === 1){
                    // 设置当前选中院校数据对象 ,
                    this.checkSchools.schoolId = null;
                    this.checkSchools.secondSchoolId = null;
                    this.checkSchools.professionId = null;
                    // 清空所有查询参数
                    this.clearQueryParam()
                    this.$refs.classTable.$emit('vuetable:refresh')
                    this.$refs.schoolCalendarTable.$emit('vuetable:refresh')
                    this.$refs.trainSchemeTable.$emit('vuetable:refresh')
                }
                // 学校
                if(node.level === 2){
                    // 设置当前选中院校数据对象 ,
                    this.checkSchools.schoolId = data.id;
                    this.checkSchools.secondSchoolId = null;
                    this.checkSchools.professionId = null;
                    // 清空所有查询参数
                    this.clearQueryParam()
                    // 设置参数
                    this.classTable.queryParams.schoolId = data.id;
                    this.schoolCalendarTable.queryParams.schoolId = data.id;
                    this.trainSchemeTable.queryParams.schoolId = data.id;
                    // 刷新表格
                    this.$refs.classTable.$emit('vuetable:refresh')
                    this.$refs.schoolCalendarTable.$emit('vuetable:refresh')
                    this.$refs.trainSchemeTable.$emit('vuetable:refresh')
                }
                // 二级院校
                if(node.level === 3){
                    // 设置当前选中院校数据对象 ,
                    this.checkSchools.schoolId = node.parent.data.id;
                    this.checkSchools.secondSchoolId = data.id;
                    this.checkSchools.professionId = null;
                    // 清空所有查询参数
                    this.clearQueryParam()
                    // 设置参数
                    this.classTable.queryParams.secondSchoolId = data.id;
                    this.schoolCalendarTable.queryParams.secondSchoolId = data.id;
                    this.trainSchemeTable.queryParams.secondSchoolId = data.id;
                    // 刷新表格
                    this.$refs.classTable.$emit('vuetable:refresh')
                    this.$refs.schoolCalendarTable.$emit('vuetable:refresh')
                    this.$refs.trainSchemeTable.$emit('vuetable:refresh')
                }
                // 专业
                if(node.level === 4){
                    // 设置当前选中院校数据对象 ,
                    this.checkSchools.schoolId = node.parent.parent.data.id;
                    this.checkSchools.secondSchoolId = node.parent.data.id;
                    this.checkSchools.professionId = data.id
                    // 清空所有查询参数
                    this.clearQueryParam()
                    // 设置参数
                    this.classTable.queryParams.professionId = data.id;
                    this.schoolCalendarTable.queryParams.professionId = data.id;
                    this.trainSchemeTable.queryParams.professionId = data.id;
                    // 刷新表格
                    this.$refs.classTable.$emit('vuetable:refresh')
                    this.$refs.schoolCalendarTable.$emit('vuetable:refresh')
                    this.$refs.trainSchemeTable.$emit('vuetable:refresh')
                }
            },
            // 打开新增班级dialog
            showAddClassDialog(){
                this.$refs.classAdd.showDialog(this.checkSchools);
            },
            // 打开新增校历
            showAddCalendarDialog(){
                this.$refs.schoolCalendarAdd.showDialog(this.checkSchools);
            },
            // 打开新增培养方案
            showAddTrainDialog(){
               this.$refs.trainSchemeAdd.showDialog(this.checkSchools);
            },
            classResetQuery(){
                this.classTable.queryParams.shortName = null;
                this.classTable.queryParams.userIdShow = null;
                this.classTable.queryParams.state = null;
                this.$refs.classTable.$emit('vuetable:refresh')
            },
            schoolCalendarResetQuery(){
                this.schoolCalendarTable.queryParams.semester = null;
                this.schoolCalendarTable.queryParams.grade = null;
                this.$refs.schoolCalendarTable.$emit('vuetable:refresh');
            },
            trainSchemeResetQuery(){
                this.trainSchemeTable.queryParams.semester = null;
                this.trainSchemeTable.queryParams.course = null;
                this.$refs.trainSchemeTable.$emit('vuetable:refresh');
            },
            // 下载
            downloadExcel(){
                let href = config.BASE_URL + api.trainScheme.downloadExcel;
                href += "?Authorization=" + localStorage.getItem("userToken");
                window.location.href = href;
            },
            // 打开导入模版dialog
            showImportTrainDialog(){
               this.$refs.trainSchemeImport.showDialog(this.checkSchools);
            },
            // 导入模版
            importExcel(){

            },
            // 上传预览
            handlePreview(file) {
                console.log(file);
            },

        },
    };
</script>
<style scoped>
    .text {
        font-size: 14px;
    }
    .item {
        margin-bottom: 18px;
    }
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both;
    }

</style>